<!-- 音标专练详情 -->
<template>
	<div class="container-detail">
		<video class="autoVideo" ref="videoElement" :src="phoneticPracticeDetail.video" :autoplay="isAutoPaly"
			:controls="false"></video>
		<img class="autoImg" :src="phoneticPracticeDetail.picture" v-if="phoneticPracticeDetail.picture" />
		<div class="autoText">
			{{ phoneticPracticeDetail.description }}
		</div>
		<div class="fixed-bottom" @click="goPractice">去练习</div>
	</div>
</template>
<script setup>
	import {
		getPhoneticPracticeInfo,
	} from '@/api/phoneticPractice'
	import {
		nextTick
	} from "vue";

	export default {
		data() {
			return {
				phoneticPracticeDetail: {},
				detailTitle: "",
				versionId: null,
				isAutoPaly: false, //是否自动播放视频
			}
		},
		onLoad(options) {
			if (options && options.versionId) {
				this.versionId = options.versionId
				this.getPhoneticPracticeInfo()
			}
		},
		onHide() {
			this.isAutoPaly = false
		},
		methods: {
			getPhoneticPracticeInfo() {
				getPhoneticPracticeInfo({
					versionId: this.versionId
				}).then(res => {
					this.phoneticPracticeDetail = res.data
					this.isAutoPaly = true
					this.detailTitle = res.data.level3 + '-' + '{' + res.data.symbols + '}'
					uni.setNavigationBarTitle({
						title: this.detailTitle
					})
				})
			},
			goPractice() {
				uni.navigateTo({
					url: '/pages/phoneticPractice/practiceH5?title=' + this.detailTitle + "&versionId=" + this
						.versionId
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.container-detail {
		.autoVideo {
			width: 100vw;
		}

		.autoImg {
			width: 136px;
			height: 136px;
			margin: 10px;
		}

		.autoText {
			font-size: 16px;
			color: #333333;
			white-space: pre-wrap;
			margin-left: 10px;
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			width: 100vw;
			font-size: 16px;
			color: #ffffff;
			line-height: 40px;
			text-align: center;
			background: #0CB76C;
		}
	}
</style>